<!DOCTYPE HTML>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<html lang="zxx" class="no-js">

<head>
	<title>Home</title>
	<!-- Meta tag Keywords -->
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta charset="UTF-8" />
	<meta name="keywords" content=""
	/>
	<script>
		addEventListener("load", function () {
			setTimeout(hideURLbar, 0);
		}, false);

		function hideURLbar() {
			window.scrollTo(0, 1);
		}
	</script>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="shortcut icon" type="image/x-icon" href="css/img/favicon.png">
	<link rel="stylesheet" href="css/fonts/font-awesome/css/font-awesome.min.css">
	<!-- Place favicon.ico in the root directory -->

	<!-- CSS here -->
	<link rel="stylesheet" href="css/bootstrap.min.css">
	<link rel="stylesheet" href="css/animate.min.css">
	<link rel="stylesheet" href="css/magnific-popup.css">
	<link rel="stylesheet" href="css/fontawesome-all.min.css">
	<link rel="stylesheet" href="css/owl.carousel.min.css">
	<link rel="stylesheet" href="css/jquery-ui.min.css">
	<link rel="stylesheet" href="css/flaticon.css">
	<link rel="stylesheet" href="css/odometer.css">
	<link rel="stylesheet" href="css/aos.css">
	<link rel="stylesheet" href="css/slick.css">
	<link rel="stylesheet" href="css/default.css">
	<link rel="stylesheet" href="css/style.css">
	<link rel="stylesheet" href="css/responsive.css">
	<!-- Meta tag Keywords -->
	<!-- css files -->
	<link rel="stylesheet" href="css/loginstyle.css" type="text/css" media="all" />
	<!-- Style-CSS -->
	<link rel="stylesheet" href="css/fontawesome-all.css">
	<!-- Font-Awesome-Icons-CSS -->
	<!-- //css files -->
	<!-- web-fonts -->
	<link href="http://maxcdn.bootstrapcdn.com/css?family=Josefin+Sans:100,100i,300,300i,400,400i,600,600i,700,700i" rel="stylesheet">
	<link href="http://maxcdn.bootstrapcdn.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" rel="stylesheet">
	<script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
	<!-- //web-fonts -->
	<style>
		#weixin_hover {
			position: relative;
		}
		#weixin_img{
			z-index: 9999;
			display: none;
			position:absolute;
			left: 50%;
			margin-left: -100px;
			margin-top: -2px;
			width: 100px;
			height: 1000%;
		}
		#weixin_hover:hover #weixin_img{
			display: block;
		}
	</style>
</head>

<body>


<!-- preloader  -->
<div id="preloader">
	<div id="ctn-preloader" class="ctn-preloader">
		<div class="animation-preloader">
			<div class="spinner"></div>
			<div class="txt-loading">
                        <span data-text-preloader="E" class="letters-loading">
                            E
                        </span>
				<span data-text-preloader="D" class="letters-loading">
                            D
                        </span>
				<span data-text-preloader="S" class="letters-loading">
                            S
                        </span>
				<span data-text-preloader="T" class="letters-loading">
                            T
                        </span>
				<span data-text-preloader="U" class="letters-loading">
                            U
                        </span>
				<span data-text-preloader="D" class="letters-loading">
                            D
                        </span>
				<span data-text-preloader="Y" class="letters-loading">
                            Y
                        </span>
			</div>
		</div>
		<div class="loader">
			<div class="row">
				<div class="col-3 loader-section section-left">
					<div class="bg"></div>
				</div>
				<div class="col-3 loader-section section-left">
					<div class="bg"></div>
				</div>
				<div class="col-3 loader-section section-right">
					<div class="bg"></div>
				</div>
				<div class="col-3 loader-section section-right">
					<div class="bg"></div>
				</div>
			</div>
		</div>
	</div>
</div>
<!-- preloader end -->


<!-- Scroll-top -->
<button class="scroll-top scroll-to-target" data-target="html">
	<i class="fas fa-angle-up"></i>
</button>
<!-- Scroll-top-end-->


<!-- 头部 -->
<header>
	<div class="header-top-wrap d-none d-md-block">
		<div class="container-fluid container-full">
			<div class="row align-items-center">
				<div class="col-lg-6 col-md-6">
					<div class="d-flex align-items-center">
						<div class="header-top-library">
							<a href="#">图书馆<i class="fas fa-angle-down"></i></a>
						</div>
						<div class="header-top-search">
							<form action="#">
								<input type="text" placeholder="搜索...">
								<button><i class="fas fa-search"></i></button>
							</form>
						</div>
					</div>
				</div>
				<div class="col-lg-6 col-md-6">
					<div class="header-right-list">
						<div class="header-top-social">
							<ul>
								<li>联系我们</li>
								<li><a href="#"><i class="fab fa-twitter"></i></a></li>
								<li>
									<a href="#"><i class="fab fa-weibo"></i> </a></li>
								<li><a href="tencent://message/?uin=1092535160&Menu=yes& Service=300&sigT=42a1e5347953b64c5ff3980f8a6e644d4b31456cb0b6ac6b27663a3c4dd0f4aa14a543b1716f9d45"><i class="fab fa-qq"></i></a></li>
								<li id="weixin_hover" ><a href="#"><i class="fab fa-weixin"></i>
									<ul>
										<img class="qrcode" id="weixin_img"  src="css/img/product/wx_01.png" alt="wx:K15035689083"/>
									</ul>
								</a></li>
							</ul>
						</div>
						<div class="header-user-login">
							<a href="index.html"><i class="fas fa-home"></i>首页</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
	<!-- bg effect -->
	<div id="bg">
		<canvas></canvas>
		<canvas></canvas>
		<canvas></canvas>
	</div>
	<!-- //bg effect -->
	<!-- title -->
	<h1>登录</h1>
	<h3 th:text="${sendMailMsg1}" style="color: white" align="center"></h3>
	<!-- //title -->
	<!-- content -->
	<div class="sub-main-w3">

		<form th:action="@{/loginTo}" method="get" id="form">
			<!-- <h2>现在登录
				<i class="fas fa-level-down-alt"></i>
			</h2> -->
			<div class="form-style-agile">
				<label style="color: #fff;">
					<i class="fas fa-user"></i>
					用户名
				</label>
				<input placeholder="用户名" name="account" class="info" type="text" required="" id="name">
			</div>
			<div class="form-style-agile">
				<label style="color: #fff;">
					<i class="fas fa-unlock-alt"></i>
					密码
				</label>
				<input placeholder="密码" name="password" class="info" type="password" required="" id="pwd">
				<!--如果msg的值为空则不显示消息-->
				<p id="ss" style="color: indianred;font-size: 18px" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}"></p>
				<span style="color: red" ></span>
			</div>
			<!-- checkbox -->
			<div class="wthree-text">
				<ul>
					<li>
						<label class="anim">
							<input type="checkbox" class="checkbox" required="">
							<span>保持登录</span>
						</label>
					</li>
					<li>
						<a th:href="@{/forgotPwdUI}">忘记密码?</a>
					</li>
					<!--微信登录-->
					<li onclick="wxli()"><a href="#"><i class="fab fa-weixin">微信登录</i></a></li>
					<li id="wx" style="display: none">
						<div id="weixin"></div>
					</li>
					<script type="text/javascript">
						function wxli(){
							$("#wx").toggle();
						}
					</script>
					<script>
						window.onload = function () {
							var obj = new WxLogin({
								id: "weixin",//根据id显示位置
								appid: "wx9168f76f000a0d4c",
								scope: "snsapi_login",//固定值
								redirect_uri: "http://localhost:8080/weixinlogin"
							});
						}
					</script>
				</ul>
			</div>
			<!-- //checkbox -->
				<input type="submit" value="登录" id="b1">
		</form>
	</div>
	<!-- //content -->

	<!-- copyright -->
	<div class="footer">
		<p>Copyright © 2020.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/">多元合创</a></p>
	</div>

	<!-- //copyright -->

	<!-- Jquery -->
	<script src="css/js/jquery-3.3.1.min.js"></script>
	<!-- //Jquery -->

	<!-- effect js -->
	<script src="css/js/canva_moving_effect.js"></script>
	<!-- //effect js -->
	<script src="css/js/vendor/jquery-3.5.0.min.js"></script>
	<script src="css/js/popper.min.js"></script>
	<script src="css/js/bootstrap.min.js"></script>
	<script src="css/js/isotope.pkgd.min.js"></script>
	<script src="css/js/imagesloaded.pkgd.min.js"></script>
	<script src="css/js/jquery.magnific-popup.min.js"></script>
	<script src="css/js/owl.carousel.min.js"></script>
	<script src="css/js/jquery.odometer.min.js"></script>
	<script src="css/js/jquery-ui.min.js"></script>
	<script src="css/js/jquery.appear.js"></script>
	<script src="css/js/slick.min.js"></script>
	<script src="css/js/ajax-form.js"></script>
	<script src="css/js/wow.min.js"></script>
	<script src="css/js/aos.js"></script>
	<script src="css/js/plugins.js"></script>
	<script src="css/js/main.js"></script>
</header>
</body>

</form>


<script>
	// 按钮绑定点击事件
	$('#b1').click(function () {
		var name=$('#name').val();
		var pwd=$('#pwd').val();
		var sz=/^\d{6}$/;
		if (name!=null && name!="" && pwd!=null && pwd!='')
		{
			$("#form").submit();
		}
		 if (name.value==null && name==""){
			 $("#ss").val('');
			$("#ss").html("用户名不能为空！");
		}
		 if (pwd.value==null && pwd==""){
			$("#ss").html("密码不能为空！");
			 $("#ss").val('');
		}

		// if(sz.exec(name))
		// {
		// 	alert("asd2")
		// 	$("#ss").html("用户名格式必须为6为数字！");
		// }

	});
</script>

</html>